

riot.tag2('tinymce-editor', '<textarea>{content}</textarea>', 'tinymce-editor [aria-label]:hover:after,[data-is="tinymce-editor"] [aria-label]:hover:after,tinymce-editor [aria-label]:focus:after,[data-is="tinymce-editor"] [aria-label]:focus:after{ display: none; }', '', function(opts) {
  var tag = this;
  tag.content = opts.content || '';
  tag.getContent = function(){
    return tinymce.activeEditor.getContent();
  };
  tag.fn = {
    setContent: function(content){
      var eda = tinymce.activeEditor;
      eda.setContent(content);
      eda.selection.select(eda.getBody(), true);
      eda.selection.collapse(false);
      eda.focus();
    },
    insertContent: function(content){
      tinymce.activeEditor.insertContent(content);
    }
  };
  tag.on('mount', function(){
    pip.load(tag.app.data.tinymce)
    .on('done', function(){
      tinymce.init({
        selector: "textarea",
        width: opts.w,
        height: opts.h,
        language: "zh_CN",
        menubar: false,
        plugins: ['textcolor colorpicker image lists'],
        toolbar: 'undo redo | styleselect | forecolor backcolor | bullist numlist outdent indent | link | image',
        statusbar: false,
        forced_root_block : "",
        force_br_newlines : true,
        force_p_newlines : false,
        init_instance_callback: function(ed){
          ed.on('change keyup', function(e){
            var pos = ed.selection.getRng().getClientRects()[0];
            opts.onUpdate &&
            opts.onUpdate(opts.item||e, {
              edit: ed,
              pos: {
                x: pos && pos.left || 0,
                y: pos && pos.top || 0
              }
            });
          });
        }
      });
    });
  });
});



riot.tag2('utils-modal', '<div if="{open}" class="modal-container {animation: open}" riot-style="width: {opts.w||360}px; height: {opts.h||200}px; z-index: {opts.z?Number(opts.z)+11:22}; top: {opts.top||\'30%\'}; margin-left: {opts.w?\'-\'+Number(opts.w/2):-180}px"> <div class="header"> <h3><yield from="title"></yield></h3> <a href="javascript:;" onclick="{fn.close}"><i class="icon-cancel"></i></a> </div> <div class="content"> <yield from="content"></yield> </div> <div class="btn-group"> <yield from="button"></yield> <button type="button" class="btn-gray" onclick="{fn.close}"> <yield from="close"></yield> </button> </div> </div> <div if="{open}" onclick="{fn.close}" riot-style="opacity: {opts.mask}; z-index: {opts.z||11}" class="modal-mask"></div>', 'utils-modal .modal-mask,[data-is="utils-modal"] .modal-mask{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #000; opacity: .4; } utils-modal .modal-container,[data-is="utils-modal"] .modal-container{ position: fixed; left: 50%; box-shadow: 0 0 10px #666; background: #fff; border-radius: 5px; } utils-modal .modal-container .header,[data-is="utils-modal"] .modal-container .header{ height: 40px; border-bottom: 1px solid #ebebeb; position: relative; } utils-modal .modal-container .header h3,[data-is="utils-modal"] .modal-container .header h3{ text-align: center; line-height: 40px; height: 40px; padding: 0; margin: 0; } utils-modal .modal-container .header a,[data-is="utils-modal"] .modal-container .header a{ position: absolute; right: 15px; top: 13px; font-size: 14px; color: #ccc; } utils-modal .modal-container .header a:hover,[data-is="utils-modal"] .modal-container .header a:hover{ border: none } utils-modal .modal-container .content,[data-is="utils-modal"] .modal-container .content{ text-align: center; padding: 20px; min-height: 60px; } utils-modal .modal-container .btn-group,[data-is="utils-modal"] .modal-container .btn-group{ height: 50px; width: 100%; text-align: center; position: absolute; bottom: 0; } utils-modal .modal-container .btn-group button,[data-is="utils-modal"] .modal-container .btn-group button{ width: 90px; margin: 0 15px; }', '', function(opts) {
  var tag = this;
  tag.open = false;
  tag.fn = {
    close: function(){
      tag.update({
        open: false
      });
    },
    open: function(){
      tag.open = true;
      document.addEventListener('keydown', function(e){
        if(e.keyCode == 27) tag.fn.close();
      }, {once: true});
      tag.update();
    }
  };
});

riot.tag2('qiniu-upload', '<button onclick="{fn.select}" ref="uploadBtn">选择文件</button>', '', '', function(opts) {
  var tag = this;
  tag.cf = {

    multiple: opts.multiple || false,

    accept: opts.accept.split(','),

    token: opts.token,

    retry: opts.retry || 1,

    debug: opts.debug || false,

    domain: opts.domain,

    folder: opts.folder || 'dev/temp'
  };

  tag.uploadedList = [];
  tag.failedList = [];
  tag.fn = {
    select: function(){
      if(!tag.qiniu){
        return alert('还在初始化中稍后点击');
      }
      tag.qiniu.chooseFile();
    }
  };
  tag.on('mount', function(){

    pip.load(tag.app.data.qiniu)
    .on('done', function(){
      tag.qiniu = new Qiniu.UploaderBuilder()
      .debug(tag.cf.debug)
      .domain('http://upload.qiniu.com/')
      .retry(tag.cf.retry)
      .multiple(tag.cf.multiple)
      .accept(tag.cf.accept)
      .tokenFunc(function(setToken){
        setToken(tag.cf.token);
      })
      .listener({
        onReady: function(task){
          tag.refs.uploadBtn.disabled = true;
          opts.onReady && opts.onReady(task);
        },
        onStart: opts.onStart || function(){},
        onTaskProgress: opts.onProgress || function(){},
        onTaskGetKey: function(task){
          var
            file = btoa(
              task.file.name +
              task.file.size +
              task.file.lastModified
            ),
            ext = task.file.name.split('.').pop();
          return tag.cf.folder+'/'+file+'.'+ext;
        },
        onTaskSuccess: function(task){
          tag.uploadedList.push({
            name: task.file.name,
            url: tag.cf.domain+'/'+task.result.key
          });
          opts.onSuccess &&
          opts.onSuccess(tag.uploadedList, opts.item||{});
        },
        onTaskRetry: opts.onRetry || function(){},
        onTaskFail: function(task){
          tag.failedList.push({
            name: task.file.name
          });
          opts.onFail &&
          opts.onFail(task, tag.failedList);
        },
        onFinish: function(task){
          tag.refs.uploadBtn.disabled = false;
          opts.onFinish && opts.onFinish(task);
        }
      }).build();
    });
  });
});



riot.tag2('pagination-number', '<ul class="pagination"> <li show="{hasPrevPage}"> <a href="javascript:;" onclick="{fn.jumpPage}">1</a> </li> <li show="{hasPrevPage}"> <a href="javascript:;" onclick="{fn.prevPage}"> &lt; </a> </li> <li show="{hasPrevSpan}">...</li> <li each="{p in prevPages}"> <a href="javascript:;" onclick="{fn.jumpPage}">{p}</a> </li> <li class="active"> <a href="javascript:;">{page}</a> </li> <li each="{p in nextPages}"> <a href="javascript:;" onclick="{fn.jumpPage}">{p}</a> </li> <li show="{hasNextSpan}">...</li> <li if="{hasNextPage}"> <a href="javascript:;" onclick="{fn.nextPage}"> &gt; </a> </li> <li show="{hasNextPage}"> <a href="javascript:;" onclick="{fn.jumpPage}">{pages}</a> </li> <li class="select" if="{opts.select==\'y\'}"> 跳转至 <span if="{pageList.length<100}"> <select onchange="{fn.jumpPage}"> <option each="{p in pageList}" riot-value="{p}" selected="{p==page}">{p}</option> </select> </span> <input if="{pageList.length>=100}" onchange="{fn.jumpPage}" riot-value="{page}" type="{\'number\'}"> / {pages}页 </li> </ul>', '', '', function(opts) {
  var tag = this;
  tag.pageSpan = Number(opts.span || 4);
  tag.pageList = [];
  tag.fn = {
    pageList: function() {
      tag.pageList = [];
      for(var page = 1; page <= tag.pages; page++){
        tag.pageList.push(page);
      }
    },
    prevPages: function() {
      var i = tag.pageSpan;
      tag.hasPrevSpan = (tag.page - tag.pageSpan) > 0;
      tag.prevPages = [];
      while(i--){
        if(tag.page - i > 1 && i > 0){
          tag.prevPages.push(tag.page - i);
        }
      }
    },
    nextPages: function() {
      var i = 0;
      tag.hasNextSpan = (tag.page + tag.pageSpan) < tag.pages;
      tag.nextPages = [];
      while(++i < tag.pageSpan){
        if(tag.page + i < tag.pages){
          tag.nextPages.push(tag.page + i);
        }
      }
    },

    jumpPage: function(e) {
      tag.fn.page(Number(
        e.item ? e.item.p :
        e.target.value || e.target.innerText
      ));
    },

    prevPage: function() {
      if(tag.hasPrevPage)
      tag.fn.page(tag.page - 1);
    },

    nextPage: function() {
      if(tag.hasNextPage)
      tag.fn.page(tag.page + 1);
    },
    pageCount: function(){
      tag.hasNextPage = tag.pages > tag.page;
      tag.hasPrevPage = tag.page > 1;
      tag.fn.prevPages();
      tag.fn.nextPages();
    },

    page: function(n) {
      opts.onChange && opts.onChange(n);
    },

    render: function(){
      tag.page = Number(opts.page || 1);
      tag.pages = Number(opts.pages || 1);
      tag.fn.pageList();
      tag.fn.pageCount();
    }
  };
  tag.on('mount', function(){});
  tag.on('update', function(){
    tag.fn.render();
  });
});



riot.tag2('input-color', '<input type="text" ref="color" riot-value="{opts.v}">', '', '', function(opts) {
  var tag = this;
  tag.fn = {};
  tag.on('mount', function(){
    new jscolor(tag.refs.color, {
      hash: true,
      onFineChange: function(){
        opts.onChange(opts.item, this.toHEXString());
      }
    })
  });
});



riot.tag2('utils-raw', '', '', '', function(opts) {
  var tag = this;
  tag.fn = {};
  tag.on('mount', function(){
    tag.root.innerHTML = opts.content;
  });
  tag.on('update', function(){
    tag.root.innerHTML = opts.content;
  });
});
